import React, { useContext, useState } from "react";
import Calendar from "../../components/Calendar/Calendar";
import classes from "./Analyze.module.css";
import Navbar from "../../components/Navbar/Navbar";
import BudgetBall from "../../components/BudgetBall/BudgetBall";
import RecordList from "../../components/RecordList/RecordList";
import Charts from "../../components/Charts/Charts";
import ThemeContext from "../../store/themeContext";
export default function Analyze() {
    const { theme } = useContext(ThemeContext);
    let menuData = [
        { name: "Food", date: "20 Feb 2020", methods: "Google Pay" },
        { name: "Uber", date: "26 Feb 2020", methods: "Cash" },
        { name: "Shopping", date: "28 Feb 2020", methods: "Paytm" },
    ];
    let kinds = ["Spends", "Categories"];
    const [kind, setKind] = useState("Spends");
    return (
        <div className={classes.Analyze} style={{ backgroundColor: theme === "light" ? "#fdfdfe" : "#121212" }}>
            <Navbar linkName={"Total Expenses"} />
            <Calendar theme={theme} />
            <BudgetBall theme={theme} height={230} marginTop={30} click={"savings"} temText={true} />
            <div className={classes.dataList}>
                <ul className={classes.kind}>
                    {kinds.map((item, index) => (
                        <li
                            key={index}
                            onClick={() => setKind(item)}
                            style={{
                                color: theme !== "light" && kind !== item && "#2f2f2f",
                            }}
                            className={kind === item ? (theme === "light" ? classes.active : classes.dark) : ""}
                        >
                            {item}
                        </li>
                    ))}
                </ul>
                {kind === "Categories" ? <Charts theme={theme} /> : null}

                <ul className={classes.menuList}>
                    {menuData.map((item, index) => (
                        <RecordList theme={theme} key={index} item={item} />
                    ))}
                </ul>
            </div>
        </div>
    );
}
